﻿<!DOCTYPE html>
<html lang="zh-CN">
<head th:replace="~{common::header('采购计划一览表')}">
    <style>
        .table-hover tbody tr:hover {
            background-color: rgba(0, 112, 192, 0.1);
        }
        .table-header {
            background-color: #0070c0;
            color: white;
        }
        .pagination {
            margin: 20px 0;
        }
    </style>
</head>
<body>
<div id="app" class="container mt-4">
    <h2 class="text-primary mb-4 text-center">报价维护</h2>
    <!--搜索栏开始-->
    <form class="form-inline">
        <div class="form-group">
            <label for="exampleQueTitle"style="font-size: 16px;">报价书名称</label>
            <input type="text" v-model="searchParam.queTitle" class="form-control" id="exampleQueTitle" placeholder="请输入报价书名称">
        </div>
        <div class="form-group">
            <label for="exampleEnquireName" style="font-size: 16px;">对应询价书名称</label>
            <input type="text"v-model="searchParam.enquireName" class="form-control" id="exampleEnquireName" placeholder="对应询价书名称">
        </div>
        <div class="form-group">
            <label for="exampleInputNumber" style="font-size: 16px;">每页显示个数:</label>
            <select class="form-select" id="exampleInputNumber" v-model.number="searchParam.pageSize"style="font-size: 16px;">
                <option value="10" selected>10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="0">全部</option>
            </select>
        </div>

        <button type="button" @click="findPage" class="btn btn-primary btn-sm"style="font-size: 16px;">查询</button>
    </form>
    <br>
    <!-- 数据表格 -->
    <div class="table-responsive">
        <table class="table table-bordered table-striped table-hover">
            <thead class="table-header">
            <tr>
                <th>选择</th>
                <th>序号</th>
                <th>报价书标题</th>
                <th>报价提交时间</th>
                <th>对应询价书</th>
                <th>询价截止时间</th>
                <th>采购类型</th>
<!--                <th>操作</th>-->
            </tr>
            </thead>
            <tbody>
            <tr v-for="(enquireDetail, index) in searchResult.data" :key="enquireDetail.queTitle" >
                <td><input type="checkbox" v-model="ids" :value="enquireDetail.queTitle" @change="show"></td>
                <td style="font-size: 16px;">{{ (searchParam.pageNum - 1) * searchParam.pageSize + index + 1 }}</td>
                <td style="font-size: 16px;">{{ enquireDetail.queTitle }}</td>
                <td style="font-size: 16px;">{{ enquireDetail.queDate }}</td>
                <td style="font-size: 16px;">{{ enquireDetail.enquireName }}</td>
                <td style="font-size: 16px;">{{ enquireDetail.endDate }}</td>
                <td style="font-size: 16px;">
                    <!-- 使用条件渲染动态显示内容 -->
                    <span v-if="enquireDetail.stockType === 'C000-1'">公开求购</span>
                    <span v-else-if="enquireDetail.stockType === 'C000-2'">定向询价</span>
                    <!-- 其他情况可以添加更多条件 -->
                </td>
<!--                <td>-->
<!--                    <button class="btn btn-sm btn-primary" @click="openDetail(item)">详情</button>-->
<!--                </td>-->
            </tr>
            </tbody>
        </table>
        <paginate
                :container-class="'pagination'"
                :page-count="pageCount"
                :click-handler="findPage"
                :prev-text="'上一页'"
                :next-text="'下一页'"
                :first-last-button="true"
                :first-button-text="'首页'"
                :last-button-text="'尾页'"
                v-model="searchParam.pageNum"
        >
        </paginate>
        <p class="mt-3">
            共 {{ searchResult.total }} 个需求计划，每页 {{ searchParam.pageSize }} 个
        </p>
    </div>


    <!-- 操作按钮 -->
    <div class="mt-4 text-center">
        <button class="btn btn-secondary" @click="openDetails">打开</button>
        <button class="btn btn-danger" @click="deleteSelected">删除</button>
    </div>
</div>

<script>
    Vue.component('paginate',VuejsPaginate)
    new Vue({
        el: '#app',
        data: {
            baseURL:'/quotation/',
            selected: [],
            searchResult:{
                //后端响应的结果
            },
            pageCount:0,//总页数
            searchParam:{
                pageNum:1,
                pageSize:10,
                queTitle:'',
                EnquireName:'',
                number:2,
            },
            entity:{},
            ids:[],
            allQueTitles:[],
        },
        created(){
            this.findPage()
        },
        methods: {
            findPage(){
                //异步请求
                axios.get('/quotation/page',{
                    params:this.searchParam

                }).then(result=>{

                    // 保存到属性中
                    this.searchResult=result.data
                    console.log(this.searchResult)

                    //计算总页数
                    this.pageCount=Math.ceil(this.searchResult.total/this.searchParam.pageSize)
                    //存储所有物资代码
                    this.allQueTitles = this.searchResult.data.map(item => item.queTitle)
                })
            },
            show(){
                console.log(this.ids)
            },
            selectAll() {
                if (this.ids.length === this.allQueTitles.length) {
                    this.ids = []; //取消全选
                } else {
                    this.ids = this.allQueTitles.slice(); //全选
                }
            },
            openDetails() {
                const selectedQueTitle = this.ids.join(',');
                console.log('选中的项1:', selectedQueTitle);
                const url = `ModifyPublicPurchaseQuote.html?QueTitles=${encodeURIComponent(selectedQueTitle)}`;
                console.log('跳转的 URL:', url);
                window.document.location = url;
            },
            deleteSelected(){
                if (this.ids.length === 0) {
                    alert('请选择要删除的项');
                    return;
                }
                if (confirm('确定要删除选中的项吗？')) {
                    // 发送 AJAX 请求到后端删除数据
                    axios.post('/deleteQuote',  this.ids )
                        .then(response => {
                            if (response.data.success) {
                                alert('删除成功');
                                // 刷新数据
                                this.searchResult.data = this.searchResult.data.filter(item => !this.ids.includes(item.queTitle));
                                this.ids = [];
                            } else {
                                alert('删除失败');
                            }
                        })
                        .catch(error => {
                            console.error('删除失败:', error);
                            alert('删除时发生错误');
                        });
                }
            }
        }
    });
</script>
</body>
</html>